<!--
    软工(开发)21-1班杜宇 实训作业：天气预报系统前端账号注册页面
    Copyright (c) 2022~2024 DuYu (202103180009@stu.qlu.edu.cn), Faculty of Computer Science & Technology, Qilu University of Technology(SDAS).
-->
<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册账号</title>
    <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./jquery-3.6.3.js"></script>
    <script src="./jquery.base64.js"></script>
    <script src="./vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./elementUI/index.css">
    <!-- 引入组件库 -->
    <script src="./elementUI/index.js"></script>
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>


    <!-- Custom styles for this template -->
    <link href="checkout.css" rel="stylesheet">
  </head>
<body class="bg-light">
<script>
    function warnings(str)
    {
        new Vue().$alert(str, '系统提示',
            {
                    confirmButtonText: '确定',
                    callback: action => { return;}
            });
            return;
    }

    $(document).on('click','#registerButton',function()
    {
        const id=$('#Id').val();
        const password01=$('#password').val();
        const password02=$('#password02').val();
        const isChecked=$('#conf').prop("checked");
        const password=password01;
        if(password01==='')
        {
            warnings('您必须设置密码');
            return;
        }
        if(id==='')
        {
            warnings('您必须设置电话号码!');
            return;
        }
        if(password01!==password02)
        {
            warnings('您两次输入的密码不一致，请检查。');
            return;
        }
        if(password01.length<2 || password01.length>12)
        {
            warnings('密码的长度应为2~12位，请重新设置。');
            return;
        }
        if(!isChecked)
        {
            warnings('您没有勾选保证合理查看天气的复选框，这可不行呀！');
            return;
        }
        $.ajax({
        url:'http://127.0.0.1:8080/user/register',
        type:'POST',
        cache:false,
        crossDomain: true,
        contentType:'application/json',
        data: JSON.stringify({
                'phoneNum':id,
                'password':password,
            }),
        dataType: "json",
        success:function (data)
        {
            if(data.status!==0)
            {
                warnings("Register Failed!");
                return;
            }
            else
            {
                new Vue().$alert('Register Successfully!', 'System Prompt',
                {
                    confirmButtonText: 'Go to login',
                    callback: action => { window.location='/';}
                });
            }
        },
        error:function (data)
        {
            warnings('出现了异常，请检查网络连接。');
            return;
        }
        });

    })
</script>

<div class="container">
  <main>
    <div class="py-5 text-center">
        <h2 style="font-weight:500"><nobr>注册 天气信息查询系统账号</nobr></h2>
        <hr class="my-4">
      <p class="lead">
        您现在正在注册：齐鲁工业大学（山东省科学院）计算机科学与技术学部<br>期末实训作业：天气信息查询系统 账号
      </p>
    </div>

    <div class="row g-5">
      <div class="col-md-7 col-lg-8">
        <h4 class="mb-3">相关信息填写</h4>
        <form class="needs-validation" novalidate>
          <div class="row g-3">

            <div class="col-12">
              <label for="Id" class="form-label">您的电话号码</label>
              <div class="input-group has-validation">
                <span class="input-group-text">Tel.</span>
                <input type="text" class="form-control" id="Id" placeholder="" required>
              </div>
            </div>

            <div class="col-12">
              <label for="password" class="form-label">设定密码 (2~12位英文字母、下划线、空格或数字)</label>
              <input type="password" class="form-control" id="password" placeholder="" required>
              <label for="password02" class="form-label">确认密码</label>
              <input type="password" class="form-control" id="password02" placeholder="" required>
            </div>


          <hr class="my-4">
          <label for="conf_check" class="form-label"><h5>请确认以下内容</h5></label>
          <div class="form-check" id="conf_check">
            <input type="checkbox" class="form-check-input" id="conf" checked required>
            <label class="form-check-label" for="conf">合理合法查看天气信息</label>
          </div>
          <hr class="my-4">
          </div>
        </form>
        <button class="w-100 btn btn-primary btn-lg" id="registerButton">注册账号</button>
      </div>
    </div>
  </main>

  <footer class="my-5 pt-5 text-muted text-center text-small">
    <p class="mb-1">&copy; 2022~2024 Duyu09.</p>
    <ul class="list-inline">
      <li class="list-inline-item"><a href="https://github.com/duyu09">GitHub</a></li>
      <li class="list-inline-item"><a href="https://author.baidu.com/home/1756639575860079">Baidu</a></li>
      <li class="list-inline-item"><a href="https://blog.csdn.net/QLU_Duyu">CSDN</a></li>
    </ul>
  </footer>
</div>
<script src="checkout.js"></script>
</body>
</html>
